<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>校园论坛系统-管理首页</title>
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/admin.css" rel="stylesheet"> <!-- 自定义样式 -->
</head>
<body>

<nav class="navbar navbar-inverse"> <!-- 修改背景色 -->
    <div class="container-fluid">
        <div class="navbar-header">
            <a class="navbar-brand" href="#">校园论坛系统</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a href="#" id="userManagement">用户管理</a></li>
            <li><a href="#"  id="categoryManagement">分类管理</a></li>
            <li><a href="#"  id="forumManagement">论坛管理</a></li>
        </ul>
        <ul class="nav navbar-nav navbar-right">
            <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
                    <img src="/img/avatar.jpg" class="nav-avatar" alt="Avatar">
                </a>
                <ul class="dropdown-menu">
                    <li><a href="/login.jsp"><span class="glyphicon glyphicon-log-out"></span> 退出</a></li> <!-- 退出系统链接 -->
                </ul>
            </li>
        </ul>
    </div>
</nav>

<div class="container" id="userContainer">
            <!-- 用户管理内容 -->
        <div class="row">
            <div class="col-md-4">
                <div class="form-group">
                    <input type="text" class="form-control" placeholder="按用户名模糊搜索" id="username">
                </div>
            </div>
            <div class="col-md-4">
                <button type="button" class="btn btn-primary" id="selectUser">查询</button>
            </div>
        </div>
        <hr>
        <div class="row">
            <div class="col-md-12">
                <table class="table table-striped">
                    <thead>
                    <tr>
                        <th>编号</th>
                        <th>用户名</th>
                        <th>用户昵称</th>
                        <th>个性签名</th>
                        <th>性别</th>
                        <th>电话号码</th>
                        <th>电子邮件地址</th>
                        <th>权限</th>
                        <th>头像</th>
                        <th>更新时间</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <c:forEach items="${userList}" var="user">
                        <tr>
                            <td>${user.id}</td>
                            <td>${user.username}</td>
                            <td>${user.nickname}</td>
                            <td>${user.bio}</td>
                            <td>${user.gender == 0 ? '男性' : '女性'}</td>
                            <td>${user.phone}</td>
                            <td>${user.email}</td>
                            <td>${user.role == 0 ? '用户' : '管理员'}</td>
                            <td><img src="${user.avatarUrl}" alt="Avatar" class="nav-avatar"></td>
                            <td>${user.updatedAt}</td>
                            <td>
                                <a href="#" class="btn btn-danger delete-user" data-id="${user.id}">删除</a>
                            </td>
                        </tr>
                    </c:forEach>
                    </tbody>
                </table>
            </div>
        </div>
</div>
<div id="categoryContainer" class="container">
    <!-- 分类管理内容 -->
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="按分类名称模糊搜索" id="categoryName">
            </div>
        </div>
        <div class="col-md-4">
            <button type="button" class="btn btn-primary" id ="selectCategory">查询</button>
        </div>
        <div class="col-md-4 text-right">
            <button type="button" class="btn btn-success" id="addCategory">新增</button>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>分类ID</th>
                    <th>分类名称</th>
                    <th>描述</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <!-- 这里保留jsp的渲染逻辑，也可以通过ajax渲染-->
                <c:forEach items="${categoryList}" var="category">
                    <tr>
                        <td>${category.id}</td>
                        <td>${category.name}</td>
                        <td>${category.description}</td>
                        <td>
                            <a href="#" class="btn btn-danger delete-category" data-id="${category.id}">删除</a>
                            <a href="#" class="btn btn-primary edit-category" data-id="${category.id}" data-name="${category.name}" data-description="${category.description}">编辑</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
        </div>
    </div>
    <!-- 模态框 -->
    <div class="modal fade" id="addCategoryModal" tabindex="-1" role="dialog" aria-labelledby="addCategoryModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="addCategoryModalLabel">新增/编辑分类</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="form-group">
                        <label for="categoryNameInput">分类名称</label>
                        <input type="text" class="form-control" id="categoryNameInput">
                    </div>
                    <div class="form-group">
                        <label for="categoryDescriptionInput">描述</label>
                        <textarea class="form-control" id="categoryDescriptionInput"></textarea>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmAddCategory">确认</button>
                </div>
            </div>
        </div>
    </div>

</div>
<!--评论管理-->
<div id="postContainer" class="container">
    <!-- 帖子管理内容 -->
    <div class="row">
        <div class="col-md-4">
            <div class="form-group">
                <input type="text" class="form-control" placeholder="按帖子内容模糊搜索" id="postContent">
            </div>
        </div>
        <div class="col-md-4">
            <button type="button" class="btn btn-primary" id="searchPost">查询</button>
        </div>
    </div>
    <hr>
    <div class="row">
        <div class="col-md-12">
            <table class="table table-striped">
                <thead>
                <tr>
                    <th>编号</th>
                    <th>标题</th>
                    <th>内容</th>
                    <th>发布人</th>
                    <th>分类</th>
                    <th>发布时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                <c:forEach items="${postPageInfo.list}" var="post">
                    <tr>
                        <td>${post.id}</td>
                        <td>${post.title}</td>
                        <td>${post.content}</td>
                        <td>${post.user.username}</td>
                        <td>${post.category.name}</td>
                        <td>${post.createTime}</td>
                        <td>
                            <a href="#" class="btn btn-danger delete-post" data-id="${post.id}">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </table>
            <nav aria-label="Page navigation">
                <ul class="pagination">
                    <c:forEach begin="1" end="${postPageInfo.pages}" var="i">
                        <li class="page-item ${postPageInfo.pageNum == i ? 'active' : ''}">
                            <a class="page-link" href="?page=${i}&keyword=${keyword}">${i}</a>
                        </li>
                    </c:forEach>
                </ul>
            </nav>
        </div>
    </div>
</div>
<script src="js/jquery-3.5.1/jquery-3.5.1.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/admin.js"></script>
<script>
    $(document).ready(function() {
        // 监听用户管理链接的点击事件
        $("#userManagement").click(function(event) {
            // 移除其他链接的 active 类
            $(".nav.navbar-nav li").removeClass("active");
            // 添加 active 类到用户管理链接的父元素
            $(this).parent().addClass("active");
            //显示用户管理
            $("#userContainer").show();
            //隐藏评论管理
            $("#postContainer").hide();
            //隐藏分类管理
            $("#categoryContainer").hide();
            // 发送 AJAX 请求获取用户列表
            loadUserList();
        });

        // 监听分类管理链接的点击事件
        $("#categoryManagement").click(function(event) {
            // 移除其他链接的 active 类
            $(".nav.navbar-nav li").removeClass("active");
            // 添加 active 类到分类管理链接的父元素
            $(this).parent().addClass("active");
            //显示用户管理
            $("#userContainer").hide();
            //隐藏评论管理
            $("#postContainer").hide();
            //隐藏分类管理
            $("#categoryContainer").show();
            //发送请求获取分类数据
            loadCategoryList();
        });

        // 监听论坛管理链接的点击事件
        $("#forumManagement").click(function(event) {
            event.preventDefault();
            // 移除其他链接的 active 类
            $(".nav.navbar-nav li").removeClass("active");
            // 添加 active 类到论坛管理链接的父元素
            $(this).parent().addClass("active");
            //隐藏用户管理
            $("#userContainer").hide();
            //显示评论管理
            $("#postContainer").show();
            //隐藏分类管理
            $("#categoryContainer").hide();
            //分页加载数据
            loadPostList(1, 10, "");
        });

        // 页面加载完成后触发用户管理链接的点击事件
        $("#userManagement").trigger("click");

        // 监听删除用户按钮
        $(document).on("click", ".delete-user", function() {
            var userId = $(this).data("id");
            deleteUser(userId);
        });

        //监听用户模糊搜索点击事件
        $("#selectUser").click(function () {
            var username = $("#username").val();
            searchUser(username)
        })


        // 监听查询分类按钮点击事件
        $("#selectCategory").click(function() {
            var categoryName = $("#categoryName").val();
            searchCategory(categoryName);
        });

        // 监听新增分类按钮点击事件
        $("#addCategory").click(function() {
            // 调用openCategoryModal函数，传入"add"作为操作类型
            openCategoryModal("add");
        });
        // 监听编辑分类按钮点击事件
        $(document).on("click", ".edit-category", function() {
            // 调用openCategoryModal函数，传入"add"作为操作类型
            // 获取所点击分类的ID、名称和描述
            var categoryId = $(this).data("id");
            var categoryName = $(this).data("name");
            var categoryDescription = $(this).data("description");

            // 调用openCategoryModal函数，传入"edit"作为操作类型和相应的分类信息
            openCategoryModal("edit", categoryId, categoryName, categoryDescription);
        });

        // 监听删除分类按钮点击事件
        $(document).on("click", ".delete-category", function() {
            var categoryId = $(this).data("id");
            deleteCategory(categoryId)
        });

        //论坛管理查询
        $("#searchPost").click(function (){
            loadPostList(1, 10, $("#postContent").val())
        });

        //帖子删除
        $(document).on('click', '.delete-post', function() {
            const postId = $(this).data('id');
            $.ajax({
                url: "/postServlet?id="+postId,
                type: 'DELETE',
                success: function(result) {
                    alert("删除成功！");
                    loadPostList(1, 10, ""); // 删除后重新加载第一页
                }
            });
        });


    });
</script>

</div>
</body>
</html>